import { Component } from 'react';
import { Layout } from 'antd';
import Video from 'video.js'
import 'video.js/dist/video-js.css'
/**
 * 超级播放器
 */
class Play extends Component {
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        this.initVideo();

    }

    initVideo = () => {
        //初始化视频方法
        let myPlayer = Video("myVideo", {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            //自动播放属性,muted:静音播放
            autoplay: "muted",
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",
            //设置视频播放器的显示宽度（以像素为单位）
            width: "800px",
            //设置视频播放器的显示高度（以像素为单位）
            height: "400px",
            fluid: true, // 自适应宽高
            language: 'zh-CN', // 设置语言
            muted: false, // 是否静音
            inactivityTimeout: false,
            // poster: 'xxx', // 视频封面图地址
            controlBar: { // 设置控制条组件
                /* 设置控制条里面组件的相关属性及显示与否  */
                // 'currentTimeDisplay': true,
                // 'timeDivider': true,
                // 'durationDisplay': true,
                // 'remainingTimeDisplay': false,
                // volumePanel: {
                //     inline: false,
                // },
                /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
                children: [
                    { name: 'playToggle' }, // 播放/暂停按钮
                    { name: 'currentTimeDisplay' }, // 视频当前已播放时间
                    { name: 'progressControl' }, // 播放进度条
                    { name: 'durationDisplay' }, // 视频播放总时间
                    { // 倍数播放，可以自己设置
                        name: 'playbackRateMenuButton',
                        'playbackRates': [0.5, 1, 1.5, 2, 2.5]
                    },
                    {
                        name: 'volumePanel', // 音量控制
                        inline: false, // 不使用水平方式
                    },
                    { name: 'FullscreenToggle' } // 全屏
                ]
            },

        }, () => {
            console.log('视频可以播放了', this);
        });
    }
    render() {
        return (
            <>
                <Layout className="layout">
                    <video
                        id="myVideo"
                        className="video-js"
                    >
                        <source
                            src="http://1259735326.vod2.myqcloud.com/71c499cdvodcq1259735326/06951e32387702291902482058/SkjhO1r4UB0A.mp4"
                            type="video/mp4"
                        />
                    </video>
                </Layout>
            </>
        )
    }
}


export default Play;